import {
  StyleSheet, Text, View, Image,
  FlatList, TextInput, TouchableOpacity
} from 'react-native';
import React from 'react';
import './global';

const Btn = ({ style, font, children, ...rest }) => {
  return (
    <TouchableOpacity
      {...rest}
      style={
        [style,
          { justifyContent: 'center', alignItems: 'center' }
        ]
      }
    >
      <Text style={font}>{children}</Text>
    </TouchableOpacity>
  )
}
export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <View style={styles.headerOne}>
          <Image
            source={require('./assets/HomeworkTwo/Signal.png')}
            style={styles.signal} />
          <Text style={styles.version}>Verizon</Text>
          <Image
            source={require('./assets/HomeworkTwo/Wifi.png')}
            style={styles.wifi} />
          <Text style={styles.version}>4:21 PM</Text>
          <Text style={styles.percentage}>100%</Text>
          <Image
            source={require('./assets/HomeworkTwo/Batery.png')}
          />
        </View>
        <View style={styles.headerTwo}>
          <View style={styles.searchBox}>
            <Image style={styles.search}
              source={require('./assets/HomeworkTwo/search.png')}
            />
            <TextInput
              placeholder='请输入您要搜索的关键字'
              placeholderTextColor={'#fff'}
            />
          </View>
          <Image style={styles.shop}
            source={require('./assets/HomeworkTwo/shop.png')}
          />
        </View>
      </View>
      <Image
        style={{ height: 0.22*h }}
        source={require('./assets/HomeworkTwo/banner.png')}
      />
      <FlatList
        data={[
          {
            key: require('./assets/HomeworkTwo/a.png'),
            text: '居家维修保养',
            textStyle: {
              color: '#333',
              fontSize: 20,
              marginLeft: -230,
            },
            next: require('./assets/HomeworkTwo/next.png'),
            bg: {
              backgroundColor: '#fcc',
              width: 80,
              height: 80,
              borderRadius: 40,
              justifyContent: 'center',
              alignItems: 'center',
              marginLeft: 15
            }
          },
          {
            key: require('./assets/HomeworkTwo/b.png'),
            text: '住宿优惠',
            textStyle: {
              color: '#333',
              fontSize: 20,
              marginLeft: -270,
            },
            next: require('./assets/HomeworkTwo/next.png'),
            bg: {
              backgroundColor: '#ffe1b1',
              width: 80,
              height: 80,
              borderRadius: 40,
              justifyContent: 'center',
              alignItems: 'center',
              marginLeft: 15
            }
          },
          {
            key: require('./assets/HomeworkTwo/c.png'),
            text: '出行接送',
            textStyle: {
              color: '#333',
              fontSize: 20,
              marginLeft: -270,
            },
            next: require('./assets/HomeworkTwo/next.png'),
            bg: {
              backgroundColor: '#bfe6a8',
              width: 80,
              height: 80,
              borderRadius: 40,
              justifyContent: 'center',
              alignItems: 'center',
              marginLeft: 15
            }
          },
          {
            key: require('./assets/HomeworkTwo/d.png'),
            text: 'E族活动',
            textStyle: {
              color: '#333',
              fontSize: 20,
              marginLeft: -270,
            },
            next: require('./assets/HomeworkTwo/next.png'),
            bg: {
              backgroundColor: '#c3ddf2',
              width: 80,
              height: 80,
              borderRadius: 40,
              justifyContent: 'center',
              alignItems: 'center',
              marginLeft: 15
            }
          }
        ]}
        renderItem={({ item }) =>
          <View style={styles.list}>
            <View style={item.bg} >
              <Image source={item.key} />
            </View>
            <Text style={item.textStyle}>{item.text}</Text>
            <Image source={item.next} style={styles.imgTwo} />
          </View>
        }
      />
      <View style={styles.boxBtn}>
        <Btn
          style={styles.btn}
          font={{ color: '#fff', fontSize: 20 }}
        >
          发布需求
        </Btn>
      </View>
      <View style={styles.footer}>
        <Text style={styles.footerText}>@E族之家 版权所有</Text>
      </View>
    </View>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#eee'
  },
  header: {
    backgroundColor: 'red',
    height: 0.1*h,
    justifyContent: 'center',
  },
  headerOne: {
    height: 0.04*h,
    flexDirection: 'row',
    alignItems: 'center'
  },
  headerTwo: {
    height: 0.06*h,
    flexDirection: 'row',
    alignItems: 'center'
  },
  search:{
    marginLeft:0.03*w,
    marginRight:0.03*w,
    width:0.025*h,
    height:0.025*h
  },
  searchBox: {
    flexDirection: 'row',
    height: 0.04*h, 
    width: 0.8*w, 
    borderColor: '#ccc', 
    borderRadius: 20, 
    backgroundColor: '#fff',
    opacity:0.8,
    marginLeft:0.05*w,
    marginRight:0.05*w,
    alignItems:'center'
  },
  shop:{
    width:0.03*h,
    height:0.03*h
  },
  signal: {
    marginLeft: 0.015*w,
    marginRight: 0.02*w,
  },
  version: {
    color: '#fff',
    fontSize: 20
  },
  wifi: {
    marginLeft: 0.08*w,
    marginRight: 0.1*w
  },
  percentage: {
    marginLeft: 0.17*w,
    color: '#fff',
    fontSize: 20
  },

  list: {
    height: 0.1*h,
    backgroundColor: '#fff',
    flex: 1,
    marginTop: 0.01*h,
    marginBottom: 0.01*h,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  imgTwo: {
    marginRight: 0.015*h,
  },
  boxBtn: {
    width: 0.8 * w,
    height: 0.08 * h,
    marginLeft: 0.1 * w,
  },
  btn: {
    fontSize: 40,
    width: 0.8 * w,
    height: 50,
    backgroundColor: 'red',
    borderRadius: 15
  },
  footer: {
    width: 0.4 * w,
    justifyContent: 'center',
    alignItems: 'center',
    marginLeft: 0.3 * w,
    marginBottom: 0.08 * h
  },
  footerText: {
    color: '#bbb',
    fontSize: 15
  }
});
